﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>

<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>

<html>
	<head>
		<title><fmt:message key="label.title" /></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/core.css" />
		<!-- <link type="text/css" rel="stylesheet" href="css/iphone.css" /> -->
		<script src="/js/jquery-1.4.2.min.js" language="javascript"></script>
		<script src="/js/jquery.lazyload.mini.js" language="javascript"></script>
		<script src="/js/core.js" language="javascript"></script>
		<script language="javascript">
			$(document).ready(function() {
				// Resize
				// onChangeSize('${imgSize}');
				
			});
		</script>
	</head>
	
	<body>
		<header>
			<h1><fmt:message key="label.title" /></h1>
		</header>

<nav>
<form id="form" action="list.do">
<table id="menu">
	<tr>
		<%-- 
		<td>
			Image Size 
			<select name="imgSize" onchange="onChangeSize(this.options[this.selectedIndex].value)">
				<option value="large" <c:if test='${imgSize=="large"}'>selected</c:if>>Large</option>
				<option value="medium" <c:if test='${imgSize=="medium"}'>selected</c:if>>Medium</option>
				<option value="small" <c:if test='${imgSize=="small"}'>selected</c:if>>Small</option>
			</select>
		</td>
		--%>
		<td>
			Change Location 
			<select name="location" onchange="onChangeLocation()">
				<option value="" <c:if test='${location==""}'>selected</c:if>>All</option>
				<option value="hk" <c:if test='${location=="hk"}'>selected</c:if>>Hong Kong Island</option>
				<option value="kl" <c:if test='${location=="kl"}'>selected</c:if>>Kowloon</option>
				<option value="tw" <c:if test='${location=="tw"}'>selected</c:if>>Tsuen Wan</option>
				<option value="tm" <c:if test='${location=="tm"}'>selected</c:if>>Tuen Mun</option>
				<option value="yl" <c:if test='${location=="yl"}'>selected</c:if>>Yuen Long</option>
				<option value="st" <c:if test='${location=="st"}'>selected</c:if>>Shatin & Ma On Shan</option>
				<option value="li" <c:if test='${location=="li"}'>selected</c:if>>Lantau</option>
			</select>
		</td>
		<td>
			<input type="checkbox" id="reload" name="reload" <c:if test='${reload}'>checked</c:if>>Force Reload</input>
		</td>
		<tr>
			<td>
				<input type="button" value="Reload this page if images are not available" onclick="onReload()"></input>
			</td>
		</tr>
	</tr>
</table>
</form>
</nav>

	<article>
		<span id="updateTime">Last Updated Time: ${trafficInfo.lastUpdateTime}</span>
		<br>
		<%-- 
		<table id="traffic">
			<c:forEach items="${trafficInfo.area}" var="area">
				<tr>
				<c:forEach items="${area.dot}" var="dot">
					<td id="dot" class="small"><img id="dot_img" class="small" src="${dot.dotURL}"></img><br/>${area.areaName} - ${dot.dotName} (${dot.dotID})</td>
				</c:forEach>
				</tr>
			</c:forEach>
		</table>
		--%>
		<div id="traffic">
			<c:forEach items="${trafficInfo.area}" var="area">
				<ul>
				<c:forEach items="${area.dot}" var="dot">
					<li>
						<div class="dot large">
							<img class="large_img" original="${dot.dotURL}" src="/images/grey.gif">
							<br>${area.areaName}
							<br>${dot.dotName}
							<br>(${dot.dotID}<c:if test="${not empty dot.dotLatlng}"> : ${dot.dotLatlng}</c:if>)
						</div>
					</li>
				</c:forEach>
				</ul>
			</c:forEach>
		</div>
		<!-- 
			<c:forEach items="${trafficInfo.area}" var="area">
				<c:forEach items="${area.dot}" var="dot">
					latlng.${dot.dotID}=
				</c:forEach>
			</c:forEach>
		-->
	</article>
	
	<aside>
	</aside>
	
		<footer>
			<img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
		</footer>
	</body>
</html>
